<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #customerform{width: 100%;height: 500px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #bmap {width: 100%;height: 160px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .anchorBL {
        display: none;
    }
</style>
<form id="customerform" method="post" style="padding-top:1px;height: 560px;">
    <input type="hidden" name="id"  >
    <input type="hidden" id="boardlng" name="boardlng">
    <input type="hidden" id="boardlat" name="boardlat">

    <table style="margin:6px; width: 98%;">
        <tr>
            <td width="50%" style="vertical-align: top;">
                <table style="margin:6px; width: 98%;">
                    <tr>
                        <td colspan="2"><div id="bmap"></div></td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">配电房名称：</td>
                        <td>
                            <input type="text" id="boardname" name="boardname"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">配电房用户登记：</td>
                        <td>
                            <input type="text" name="voltmark"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">配电房容量：</td>
                        <td>
                            <input type="text" name="volume"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">用户类型：</td>
                        <td>
                            <input type="text" name="usertype"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">配电房单位名称：</td>
                        <td>
                            <input type="text" name="factoryname"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>

                    </tr>
                    <tr style="height: 30px">
                        <td class="label"  width="126px" style="text-align: right">所属单位负责人：</td>
                        <td>
                            <input type="text" name="factoryuser"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">所属单位联系方式：</td>
                        <td>
                            <input type="text" name="factoryphone"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">所属巡视单位：</td>
                        <td>
                            <input type="text" id="routername" name="routername"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">巡视人员：</td>
                        <td>
                            <input type="text" id="cunsumername" name="cunsumername"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">巡视人员手机：</td>
                        <td>
                            <input type="text" id="cunsumermobile" name="cunsumermobile"  class="selectp" data-options="required:true" style="width:160px;height: 24px;">
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td class="label" width="126px" style="text-align: right">运维类型：</td>
                        <td colspan="3">
                            <select name="tasktype" id="tasktype" style="width: 188px;height: 26px;" class="selectp">
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="50%" style="vertical-align: top;">
                <table style="margin:6px; width: 98%;">
                    <tr>
                        <td>
                            现场描述：<br>
                            <textarea name="content" style="resize:none;width:330px; height:60px;padding: 6px" ></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            操作描述：<br>
                            <textarea name="working" style="resize:none;width:330px; height:60px;padding: 6px" ></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            操作前图片：<br>
                            <img src="/img/yyy.jpg" class="layui-upload-img" style="width: 60px;height: 80px;margin: 4px;cursor: pointer;" onclick="previewImg(this)">
                            <img src="/img/yyy.jpg" style="width: 60px;height: 80px;margin: 4px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            操作后图片：<br>
                            <img src="/img/yyy.jpg" style="width: 60px;height: 80px;margin: 4px;"> <img src="/img/yyy.jpg" style="width: 60px;height: 80px;margin: 4px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            结单图片：<br>
                            <img src="/img/yyy.jpg" style="width: 60px;height: 80px;margin: 4px;">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

</form>
<script>
    var centermarker;
    //DOM加载完之后才能调用，否则经纬度获取不到。
    setTimeout(function () {
        var boardlng = $("#boardlng").val();
        var boardlat = $("#boardlat").val();
        // 百度地图API功能
        var map = new BMap.Map("bmap");    // 创建Map实例

        //map.centerAndZoom("泰州", 15);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        var myIconD = new BMap.Icon('/img/map/dw.png',new BMap.Size(32,32));
        map.setCurrentCity("泰州");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapStyle({style:"light"});
        //-----------------------------------------------------------------------------------
        //如果lng 或 lat一个为0 说明没有定位，显示为地图中心
        //-----------------------------------------------------------------------------------
        if(boardlat=='' || boardlat=="0"){
            boardlng="119.917167";
            boardlat="32.462906";
            $("#boardlng").val(boardlng);
            $("#boardlat").val(boardlat);
        }

        var poincenter = new BMap.Point(boardlng, boardlat);
        var label = new BMap.Label($('#boardname').val(), {position:poincenter,offset:new BMap.Size(16,32)});
        label.setStyle({transform: 'translateX(-50%)'});
        centermarker = new BMap.Marker(poincenter, {icon: myIconD,offset:new BMap.Size(0,0)});
        centermarker.setLabel(label);
        map.centerAndZoom(poincenter, 15);
        map.addOverlay(centermarker);               // 将标注添加到地图中
    },10);

    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layui.use(['jquery','layer'],function(){
            var $=layui.jquery
                ,layer=layui.layer
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [400 + 'px',600+'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        });
    }

</script>
</html>